<template>
  <!-- 
    富文本控件
    用法：
     <rich-text-editor v-model="content"></rich-text-editor>
   -->
  <div>
    <div ref="textarea"></div>
  </div>
</template>

<script>
import wangEditor from 'wangeditor';
export default {
  name: 'HelloWorld',
  model: {
    prop: 'content',
    event: 'change',
  },
  props: {
    msg: String,
    content: String,
  },
  data() {
    return {
      editor: null,
    };
  },
  mounted() {
    var that = this;
    const editor = new wangEditor(this.$refs.textarea);
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      //   this.editorData = newHtml;
      that.$emit('change', newHtml);
    };
    editor.config.uploadImgShowBase64 = true;
    // 创建编辑器
    editor.create();
    this.editor = editor;
    this.editor.txt.html(this.content);
    this.editor.config.uploadVideoHeaders = {
      token: this.store.user.token,
      adminToken: this.store.admin.token,
    };
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy();
    this.editor = null;
  },
  watch: {
    content(val) {
      this.editor.txt.html(val);
    },
  },
  methods: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less"></style>
